"use client";

import AvatarItem from "@/hof/AvatarItem";
import { HOF } from "@/hof/HOF";
import useGetAbility5KHOF from "@/hof/useGetAbility5KHOF";
import useGetAbility7KHOF from "@/hof/useGetAbility7KHOF";
import useGetAbility9KHOF from "@/hof/useGetAbility9KHOF";
import useGetAtBandHOF from "@/hof/useGetAtBandHOF";
import useGetAtHighestHOF from "@/hof/useGetAtHighestHOF";
import useGetAtStandHOF from "@/hof/useGetAtStandHOF";
import useGetAtTotalHOF from "@/hof/useGetAtTotalHOF";
import useGetLevelHOF from "@/hof/useGetLevelHOF";
import useGetTotalBandHOF from "@/hof/useGetTotalBandHOF";
import useGetTotalHighestHOF from "@/hof/useGetTotalHighestHOF";
import useGetTotalStandHOF from "@/hof/useGetTotalStandHOF";
import useGetTotalTotalHOF from "@/hof/useGetTotalTotalHOF";
import { AvatarLoading } from "@/Loading";

import { useHOFStore } from "@/Stores";
import { observer } from "mobx-react-lite";
import { useTranslations } from "next-intl";
import {
  ListGroup,
  Nav,
  NavItem,
  NavLink,
  TabContent,
  TabPane,
} from "reactstrap";

const getAvatarItems = (hofs: HOF[]) => {
  return hofs.map(({ avatarID, avatarName, text }) => (
    <AvatarItem
      key={avatarID}
      avatarID={avatarID}
      avatarName={avatarName}
      text={text}
    />
  ));
};

export default observer(() => {
  const {
    tabPosition,
    totalTabPosition,
    atTabPosition,
    abilityTabPosition,
    setTabPosition,
    setTotalTabPosition,
    setAtTabPosition,
    setAbilityTabPosition,
  } = useHOFStore();
  const t = useTranslations();

  const { data: totalTotalHOF, isFetched: isTotalTotalHOFLoaded } =
    useGetTotalTotalHOF();
  const { data: totalHighestHOF, isFetched: isTotalHighestHOFLoaded } =
    useGetTotalHighestHOF();
  const { data: totalStandHOF, isFetched: isTotalStandHOFLoaded } =
    useGetTotalStandHOF();
  const { data: totalBandHOF, isFetched: isTotalBandHOFLoaded } =
    useGetTotalBandHOF();
  const { data: atTotalHOF, isFetched: isAtTotalHOFLoaded } =
    useGetAtTotalHOF();
  const { data: atHighestHOF, isFetched: isAtHighestHOFLoaded } =
    useGetAtHighestHOF();
  const { data: atStandHOF, isFetched: isAtStandHOFLoaded } =
    useGetAtStandHOF();
  const { data: atBandHOF, isFetched: isAtBandHOFLoaded } = useGetAtBandHOF();
  const { data: ability5KHOF, isFetched: isAbility5KHOFLoaded } =
    useGetAbility5KHOF();
  const { data: ability7KHOF, isFetched: isAbility7KHOFLoaded } =
    useGetAbility7KHOF();
  const { data: ability9KHOF, isFetched: isAbility9KHOFLoaded } =
    useGetAbility9KHOF();
  const { data: levelHOF, isFetched: isLevelHOFLoaded } = useGetLevelHOF();

  const getProperties = (i: number) => ({
    className: tabPosition === i ? "active route" : "route",
    onClick: () => {
      setTabPosition(i);
    },
  });

  const getTotalProperties = (i: number) => ({
    className: totalTabPosition === i ? "active route" : "route",
    onClick: () => {
      setTotalTabPosition(i);
    },
  });

  const getAtProperties = (i: number) => ({
    className: atTabPosition === i ? "active route" : "route",
    onClick: () => {
      setAtTabPosition(i);
    },
  });

  const getAbilityProperties = (i: number) => ({
    className: abilityTabPosition === i ? "active route" : "route",
    onClick: () => {
      setAbilityTabPosition(i);
    },
  });

  return (
    <>
      <Nav tabs>
        <NavItem>
          <NavLink {...getProperties(0)}>{t("hofTotalText")}</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(1)}>{t("hofAtText")}</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(2)}>{t("hofAbilityText")}</NavLink>
        </NavItem>
        <NavItem>
          <NavLink {...getProperties(3)}>{t("hofLevelText")}</NavLink>
        </NavItem>
      </Nav>
      <TabContent activeTab={tabPosition}>
        <TabPane tabId={0}>
          <Nav tabs>
            <NavItem>
              <NavLink {...getTotalProperties(0)}>{t("hofTotal")}</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getTotalProperties(1)}>{t("hofHighest")}</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getTotalProperties(2)}>{t("hofStand")}</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getTotalProperties(3)}>{t("hofBand")}</NavLink>
            </NavItem>
          </Nav>
          <TabContent activeTab={totalTabPosition}>
            <TabPane tabId={0}>
              <ListGroup>
                {isTotalTotalHOFLoaded ? (
                  getAvatarItems(totalTotalHOF)
                ) : (
                  <AvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={1}>
              <ListGroup>
                {isTotalHighestHOFLoaded ? (
                  getAvatarItems(totalHighestHOF)
                ) : (
                  <AvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={2}>
              <ListGroup>
                {isTotalStandHOFLoaded ? (
                  getAvatarItems(totalStandHOF)
                ) : (
                  <AvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={3}>
              <ListGroup>
                {isTotalBandHOFLoaded ? (
                  getAvatarItems(totalBandHOF)
                ) : (
                  <AvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
          </TabContent>
        </TabPane>
        <TabPane tabId={1}>
          <Nav tabs>
            <NavItem>
              <NavLink {...getAtProperties(0)}>{t("hofTotal")}</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getAtProperties(1)}>{t("hofHighest")}</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getAtProperties(2)}>{t("hofStand")}</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getAtProperties(3)}>{t("hofBand")}</NavLink>
            </NavItem>
          </Nav>
          <TabContent activeTab={atTabPosition}>
            <TabPane tabId={0}>
              <ListGroup>
                {isAtTotalHOFLoaded ? (
                  getAvatarItems(atTotalHOF)
                ) : (
                  <AvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={1}>
              <ListGroup>
                {isAtHighestHOFLoaded ? (
                  getAvatarItems(atHighestHOF)
                ) : (
                  <AvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={2}>
              <ListGroup>
                {isAtStandHOFLoaded ? (
                  getAvatarItems(atStandHOF)
                ) : (
                  <AvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={3}>
              <ListGroup>
                {isAtBandHOFLoaded ? (
                  getAvatarItems(atBandHOF)
                ) : (
                  <AvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
          </TabContent>
        </TabPane>
        <TabPane tabId={2}>
          <Nav tabs>
            <NavItem>
              <NavLink {...getAbilityProperties(0)}>⑤K</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getAbilityProperties(1)}>⑦K</NavLink>
            </NavItem>
            <NavItem>
              <NavLink {...getAbilityProperties(2)}>9K</NavLink>
            </NavItem>
          </Nav>
          <TabContent activeTab={abilityTabPosition}>
            <TabPane tabId={0}>
              <ListGroup>
                {isAbility5KHOFLoaded ? (
                  getAvatarItems(ability5KHOF)
                ) : (
                  <AvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={1}>
              <ListGroup>
                {isAbility7KHOFLoaded ? (
                  getAvatarItems(ability7KHOF)
                ) : (
                  <AvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
            <TabPane tabId={2}>
              <ListGroup>
                {isAbility9KHOFLoaded ? (
                  getAvatarItems(ability9KHOF)
                ) : (
                  <AvatarLoading loadingCount={50} />
                )}
              </ListGroup>
            </TabPane>
          </TabContent>
        </TabPane>
        <TabPane tabId={3}>
          <ListGroup>
            {isLevelHOFLoaded ? (
              getAvatarItems(levelHOF)
            ) : (
              <AvatarLoading loadingCount={50} />
            )}
          </ListGroup>
        </TabPane>
      </TabContent>
    </>
  );
});